<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src=".././static/js/public-head.js"></script>
</head>
<body>


<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                    用户:
                    <div class="layui-inline">
                        <input class="layui-input" name="searchStr" id="searchStr" placeholder="输入用户名或工号"    autocomplete="off">
                    </div>
                    部门:
                    <div class="layui-inline" style="width: 300px">
                        <select id="deptId"  xm-select="deptId"  xm-select-show-count="2"  xm-select-height="35px" xm-select-search="">
                        </select>
                    </div>
                </div>

                <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var layindex,layevent;
    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use([ 'table','form','formSelects','laydate',"element"], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var router = layui.router();
        var formSelects = layui.formSelects
        var exportData = []
        var laydate = layui.laydate;
        var element = layui.element;

        var tableOption = {
            elem: '#test-table-reload'
            ,url: basePath + '/user/index'
            ,where:{token:token}
            ,method:"post"
            ,toolbar:commonUtil.toolbarHTML()
            ,title:"用户清单"
            ,defaultToolbar:['filter', 'print']
            ,cols: [[
                {title: '请选择', width:80,type:"radio",fixed:'left'}
                ,{field:'USER_NO', title: '账号',fixed:'left',sort:true }
                ,{field:'USER_NAME', title: '用户名', sort:true,minWidth:100    }
                ,{field:'GENDER_NAME', title: '性别',hide:true }
                ,{field:'BIRTH', title: '生日',hide:true }
                ,{field:'DEPT_NAME', title: '部门' }
                ,{field:'ORG_NAME', title: '区域' }
                ,{field:'EDUCATION', title: '学历',hide:true }
                ,{field:'POSITION', title: '岗位',hide:true }
                ,{field:'SALARY', title: '薪资',hide:true }
                ,{field:'EMAIL', title: '邮箱' ,hide:true}
                ,{field:'PHONE', title: '电话' }
                ,{field:'QQ', title: 'QQ' ,hide:true }
                ,{field:'WEI_XIN', title: '微信',hide:true }
                ,{field:'ADDRESS', title: '地址',hide:true }
                ,{field:'IS_ACTIVE', title: '是否激活',templet:function(d){
                    return d.IS_ACTIVE=="0"?"否":"是"
                } }
            ]]
            ,exportHead:{USER_NO: '账号',
                USER_NAME: '用户名',
                GENDER_NAME: '性别',
                BIRTH: '生日',
                DEPT_NAME: '部门',
                ORG_NAME: '区域',
                DEPT_NAME: '部门',
                EDUCATION:"学历",
                POSITION:"岗位",
                SALARY:"薪资",
                EMAIL: '邮箱' ,
                PHONE: '电话' ,
                QQ:"QQ",
                WEI_XIN:"微信",
                IS_ACTIVE: '是否激活',
                ADDRESS:"地址"
            }
            ,page: true
            ,height: 'full-100'
            // ,width: 600
            ,done:function(res){
                exportData = res.data
            }
        };

        var sourceTable = table.render(tableOption);
        var userId = ""
        table.on("radio(test-table-reload)",function(obj){
            userId = obj.data.ID
            //console.log(userId)
        })

        formSelects.data('deptId', 'server', {
            url: basePath+'/user/selectDeptTreeData',
            data:{token:token},
            //linkage: true,
            linkageWidth: 180   //代表每一级别的宽度, 默认是100
        });


        table.on("toolbar(test-table-reload)",function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var titleLabel = ""

            switch(obj.event){
                case 'query':
                    tableReload();
                    break;
                case 'add':
                    titleLabel = "新增用户"
                    layevent = "add"
                    layindex= layer.open({
                        type:2,
                        title:"<i class='layui-icon layui-icon-note'></i>&nbsp;" + titleLabel,
                        content:'userList-update.html' ,
                        area: ['800px', '500px'],
                        end : function(){
                            tableReload()
                        }
                    })
                    break;
                case 'downLoad':
                    //console.log(JSON.stringify(exportData));
                    //console.log(JSON.stringify(tableOption.exportHead));
                    JSONToExcelConvertor(exportData , tableOption.title, tableOption.exportHead);
                    break;
                case "detail":break;
                case "edit":
                    titleLabel = "编辑用户";
                    layevent = "edit"
                    if(checkStatus.data.length !=0) {
                        var rowData = checkStatus.data[0]
                        var id = userId
                        var param = {id: id, token: token}

                        layindex =   layer.open({
                            type:2,
                            title:"<ii class='layui-icon layui-icon-note'> "+titleLabel+"</ii>",
                            content:'userList-update.html?id='+userId ,
                            area: ['800px', '500px'],
                            end : function(){
                                tableReload()
                            }
                        })
                    }else{
                        layer.msg("请先选中后再编辑")
                    }
                    break;
                case 'del':
                    titleLabel = "删除用户"
                    if(checkStatus.data.length !=0){
                        var id = userId
                        var param = {id:id,token:token}
                        layer.confirm('确定要删除用户['+checkStatus.data[0].USER_NAME+']？', {icon:0, title:'提示'}, function(index){

                            $.getJSON(basePath+"/user/del",param,function(res){
                                if(res.code !=0){
                                    layer.msg(res.msg)
                                }else{
                                    //layer.close(layer.index)
                                    tableReload()
                                    layer.close(index);
                                    return true;
                                }
                            } )
                        });
                    }else{
                        layer.msg("请选中后再删除")
                    }
                    break;
                case "addAuth":
                    if(checkStatus.data.length ==0) {
                        layer.msg("请选中用户后再操作")
                        return;
                    }
                    layer.open({
                        type:"1",
                        area:['600px','400px'],
                        title: '<i class="layui-icon layui-icon-username"></i>&nbsp;用户权限分配:&nbsp;'+ checkStatus.data[0].USER_NAME
                        ,content: $("#user-add-auth").html()
                        ,success:function(){
                            element.tabChange('user-add-auth-tab', "user-role-func");
                        }
                    });
                    break;
            };
        })


        element.on('tab(user-add-auth-tab)', function(data){
            var layid = this.getAttribute('lay-id')
            var param = {token:token,roleType:"FUNC_ROLE",authUserId:userId}
            var url = basePath +"/sysRole/userRoleList"
            if(layid != "user-role-func"){
                param.roleType = "DATA_ROLE"
            }
            $.post(url,param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg)
                }else{
                    $("#"+layid+"-dom").empty().append(res.data)
                    form.render(null,"user-add-auth-form")
                }
                return false;
            } ,'json')
        })



        form.on("checkbox(roleId)",function(obj){
            var checked = obj.elem.checked ;
            var param = {token:token,roleId:obj.value,userId:userId,checked:checked};
            var url = basePath +"/sysRole/addSysUserRole";
            //console.log(obj.elem)
            $.post(url,param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg);
                    obj.elem.checked = !checked
                    form.render(null,"user-add-auth-form")
                    return false;
                }else{
                    return true;
                }
            } ,'json')
            return false
        })

        form.on("submit(user-add-form-bt)",function(data){
            var param = data.field;
            param.token = token;
            var url = basePath+"/user/add"
            if(layevent !='add'){
                url =  basePath+"/user/edit"
            }
            $.post(url,param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg)
                }else{
                    layer.close(layindex)
                    tableReload()
                }
                return false;
            } ,'json')
            return false ;
        })

        function tableReload(){
            table.reload("test-table-reload",{
                where:{
                    searchStr: $("#searchStr").val(),
                    deptId: formSelects.value("deptId","valStr")
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        }
    });

    // 下载文件方法
    var funDownload = function (content, filename) {
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };



</script>

<script type="text/html" id="dataSource-state"  >
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="IS_ACTIVE" value="{{d.ID}}" lay-skin="switch" lay-text="是|否" lay-filter="dataSource-state" {{ d.IS_ACTIVE == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="dataSource-toolBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="detail">详情</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="downLoad">导出Excel</button>
    </div>
</script>



<script type="text/html" id="user-add-auth" lay-filter="user-add-auth">

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding:1px;margin: 1px">
                <form class="layui-form" action="" lay-filter="user-add-auth-form">
                    <div class="layui-form-item">
                        <div class="layui-tab" lay-filter="user-add-auth-tab" id="user-add-auth-tab">
                            <ul class="layui-tab-title">
                                <li lay-id="user-role-func"><i class="layui-icon layui-icon-app"></i>&nbsp;分配功能权限</li>
                                <li lay-id="user-role-data"><i class="layui-icon layui-icon-table"></i>&nbsp;分配数据权限</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item" id="user-role-func-dom">功能角色</div>
                                <div class="layui-tab-item" id="user-role-data-dom">数据角色</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</script>
</body>
</html>